Design System
Analysis of Allbirds

A near-monochrome, flat retail system where warm oatmeal beige is the canvas and near-black charcoal does all the talking — humanist Geograph type, fully-pilled buttons, hairline borders instead of shadows, and not a single gradient in sight.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Set in Geograph, a proprietary humanist geometric sans — shown here in its nearest Google substitute, Hanken Grotesk. Hierarchy is built through size and weight (tracking stays normal). A 14px / 400 tier carries almost all body copy; a heavy 900 weight is reserved for short uppercase labels.

03 — Components

Button Variants

button-primary
Charcoal #202223 pill, white label, regular 400 weight. The single dominant CTA across the store.
button-dark
Same charcoal — the brand is monochrome, so dark and primary are one and the same.
button-secondary
Outlined pill: white fill, 1px ink border. Used for low-emphasis actions.
button-pill
Beige surface-alt chip for filters and toggles. Fully rounded.
04 — Components

Cards & Surfaces

Product cards are borderless: a softly-rounded beige media tile, then ink title and price below. Depth is absent — a faint lift appears only on hover and on floating sale badges.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

Built on a 4px base unit (8px effective rhythm). Control padding clusters around 12–13px vertical and 24–25px horizontal.

07 — Foundations

Border Radius

Soft and fully rounded throughout — from a 3px detail up to 80px media corners and a 100px pill. Buttons and inputs are true pills.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The brand default. Surfaces are separated by borders and the beige/white contrast, not shadow.
Level 1 — a barely-there 1px lift, used only on floating sale badges and on card hover.
Level 2 — a soft 24px-blur drop for the cart drawer, modals and dialogs. The only place depth gets real.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle / two-up product grid, hamburger nav, full-width pill CTAs, stacked beige bands.
Tablet768–1023pxTwo-up grids, condensed header, side padding tightens to ~22px.
Laptop1024–1279pxFour-up product grids return, full horizontal nav.
Desktop≥ 1280pxCentred 1200px column with generous gutters; editorial full-bleed beige sections.

Graceful by design: because the system leans on so few moving parts — pills, hairlines and beige bands — it collapses cleanly across breakpoints with almost no visual change.

Pricing Tiers

Illustrative only — Allbirds is a single-purchase retailer, not a subscription. These demonstrate the card / tier component pattern in the brand's flat, bordered style.

The Essentials
₱5,500/ pair
Everyday comfort in our signature wool.
  • Free shipping & returns
  • Machine washable
  • Carbon-neutral delivery
The Bundle● Most popular
₱9,900/ 2 pairs
Mix runners and loungers, save more.
  • Everything in Essentials
  • Save ₱1,100 vs. singles
  • Priority customer support
The Collection
₱14,500/ 3 pairs
A full rotation for every occasion.
  • Everything in The Bundle
  • Free sock 3-pack
  • Early access to drops

Data Table

An order-history pattern rendered in the brand's hairline-and-beige table style.

OrderProductSizeStatusWhen
#AB-10428Wool Runner — Natural GreyUS 9DeliveredJun 24
#AB-10391Tree Dasher 2 — ThunderUS 10DeliveredJun 18
#AB-10355Wool Lounger — Hazy BeigeUS 8In transitJun 28
#AB-10310Tree Runner — BuffUS 9.5ProcessingJun 29
#AB-10288Trail Runner SWT — Rugged GreenUS 11DeliveredJun 12
1–5 of 412
123

Auth Forms

Account sign-in and creation in the pill-input, charcoal-CTA house style.

Sign in

Welcome back

OR
Create account

Join the flock

OR